(function () {
    var style = `
        .jwebui-page {
            height: 30px;
            line-height: 30px;
            bottom: 0px;
            text-align: center;
            background: #efefef;
            font-size: 12px;
            width: 100%;
            color: #8c8c8c;
            overflow: hidden;
            -moz-user-select:none;
            -webkit-user-select:none;
            user-select:none;    
        }
        .jwebui-page div{
            display: inline-block;
        }
        .jwebui-page > div, .jwebui-pages span {
            padding: 0 5px;
            margin: 0 5px;
        }
        .jwebui-page .page_item{
            cursor: pointer;
            min-width: 30px;
            height: 30px;
            display: inline-block;
            box-sizing: border-box;
        }
        .jwebui-page .page_item.page_num{
        }

        .jwebui-page .page_item:hover{
            color: #04dabd;
        }

        .jwebui-page .page_item.page_num.page_item_this,
        .jwebui-page .page_item.page_num.page_item_this:hover {
            color: #fffefe;
            cursor: unset;
            font-weight: 700;
            background: #18b18e;
        }
    `;

    var template = `
        <div class="jwebui-page" v-if="cpuPage.show">
            <div>{{cpuPage.currPage}} / {{cpuPage.totalPage}}</div>
            <div class="pre page_item" @click="prePage()">上一页</div>
            <div class="pages">
                <span v-for="page in pages" :class="'page_num page_item' + (page.isCurrPage?' page_item_this':'')" @click="pageAction(page.num)">{{page.title}}</span>
            </div>
            <div class="next page_item" @click="nextPage()">下一页</div>
            <div>共 {{cpuPage.total}} 条</div>
        </div>
    `
    return {
        data() {
            return {
                pageItemCount: 10,
            }
        },
        props: ["page"],
        updated: function () {
        },
        mounted: function () {
        },
        methods: {
            pageAction(num) {
                this.$emit('action', num)
            },
            prePage() {
                this.pageAction(this.cpuPage.currPage - 1 < 1 ? 1 : this.cpuPage.currPage - 1)
            },
            nextPage() {
                this.pageAction(this.cpuPage.currPage + 1 > this.cpuPage.totalPage ? this.cpuPage.totalPage : this.cpuPage.currPage + 1);
            },
        },
        computed: {
            cpuPage() {
                var show = this.page.show != false;
                var total = this.page.total ? this.page.total : 0;
                var pageSize = this.page.pageSize ? this.page.pageSize : 10;
                var show = this.page.show != false;
                var totalPage = parseInt((total + 1) / pageSize)
                totalPage = totalPage == 0 ? 1 : totalPage;

                return {
                    currPage: this.page.currPage ? this.page.currPage : 1,
                    show: show,
                    total: total,
                    totalPage: totalPage
                }
            },
            pages() {
                var pageinfo = [];
                var start = 1;
                var end = this.cpuPage.totalPage;
                if (this.cpuPage.currPage - 1 > 3) {
                    start = this.cpuPage.currPage - 2;
                } else {
                    start = 1;
                }
                if (this.cpuPage.totalPage - this.cpuPage.currPage > 3) {
                    end = this.cpuPage.currPage + 2;
                } else {
                    end = this.cpuPage.totalPage;
                } 
                if(end == this.cpuPage.totalPage && this.cpuPage.currPage - 4 >= 1) {
                    start = this.cpuPage.currPage - 4;
                }
                if(start == 1 && this.cpuPage.currPage + 4 <= this.cpuPage.totalPage) {
                    end  = this.cpuPage.currPage + 4;
                }
                if (start > 1) {
                    pageinfo = pageinfo.concat([
                        {
                            title: 1,
                            num: 1,
                            isCurrPage: 1 == this.cpuPage.currPage,
                        },
                        {
                            title: '<<',
                            num: this.cpuPage.currPage - 4,
                        }
                    ])
                }
                for (var i = start; i <= end; i++) {
                    pageinfo[pageinfo.length] = {
                        title: i,
                        num: i,
                        isCurrPage: i == this.cpuPage.currPage,
                    }
                }
                if (end < this.cpuPage.totalPage) {
                    pageinfo = pageinfo.concat([
                        {
                            title: '>>',
                            num: this.cpuPage.currPage + 4,
                        }, {
                            title: this.cpuPage.totalPage,
                            num: this.cpuPage.totalPage,
                            isCurrPage: this.cpuPage.totalPage == this.cpuPage.currPage,
                        }
                    ])
                }
                return pageinfo;
            }
        },
        watch: {
        },
        template: template,
        style: style
    }
})()